<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="app">
        <btn-counter></btn-counter>
        <btn-counter></btn-counter>
        <btn-counter></btn-counter>
        <my-component></my-component>
        <!-- <MyComponent></MyComponent> -->
    </div>
    <script>
      //定义一个全局组件
      const componentA=  {
          template:`<h1> My-Component组件 </h1>`
      } ;

      const componentB={
          //组件中的data属性,必须通过一个函数返回一个对象(通过该函数形成闭包的环境)
          data:function(){
              return {
                  num:0 
              };
          },
          methods:{
              btnHandle(){
                  this.num+=2;
              }
          },
         template:`
           <div>
            <button @click='btnHandle'>Button1,单击 {{num}} 次</button>           
           </div>
         `
      };

      //1. 实例化一个Vue的实例
      let vm = new Vue({
        el: "#app",
        data: {},
        components:{
          'MyComponent':componentA,
          'btn-counter':componentB
        }
      });
    </script>
  </body>
</html>
